<template>
  <div>
    <a-card
        :bordered="true"
        style="margin-bottom: 20px"
    >
      <span
          class="card-title"
          slot="title"
      >数据总量</span>

      <div class="card-content">
        <span>数据总量：</span>
        <span>{{ totalData }}条</span>
      </div>
    </a-card>
    <a-card
        :bordered="true"
        style="margin-bottom: 20px"
    >
      <span
          class="card-title"
          slot="title"
      >数据占比</span>

      <DataPie :dataInfo="dataInfo"/>

      <!-- <a-card
        class="inner-card"
        :bordered="true"
      >
        <div style="padding-top: 34px;">
          <DataPie :dataInfo="dataInfo" />
        </div>
      </a-card> -->

      <!-- <a-card
        class="inner-card"
        title="数据源占比"
        :bordered="true"
      >
        <a-select
          style="position: absolute; z-index: 99;"
          v-model="dataSourceType"
          @change="() => loadDataSourceInfo()"
        >
          <a-select-option
            v-for="d in dataSourceTypeMap"
            :key="d.value"
            :value="d.value"
          >
            {{ d.label }}
            </a-select-option>
        </a-select>

        <div style="padding-top: 34px;">
          <DataSourcePie :dataSourceInfo="dataSourceInfo" />
        </div>
      </a-card> -->
    </a-card>

    <a-card :bordered="true">
      <span
          class="card-title"
          slot="title"
      >数据变化趋势</span>
      <a-select
          :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }"
          style="position: absolute; z-index: 99; width: 100px;"
          v-model="trendType"
          @change="() => this.loadDataSourceInfo()"
      >
        <a-select-option
            v-for="d in trendTypeMap"
            :key="d.value"
            :value="d.value"
        >
          {{ d.label }}
        </a-select-option>
      </a-select>

      <div style="padding-top: 34px;">
        <TrendLine :trendInfo="trendInfo"/>
      </div>
    </a-card>
  </div>
</template>

<script>
import {gPostAction} from '@/api/manage'
import DataPie from './modules/DataPie'
import DataSourcePie from './modules/DataSourcePie'
import TrendLine from './modules/TrendLine'

export default {
  name: 'F010202',
  components: {DataPie, DataSourcePie, TrendLine},
  data() {
    return {
      dataSourceTypeMap: [{
        label: '一般业务数据',
        value: 'general'
      }, {
        label: '重要业务数据',
        value: 'vital'
      }],
      dataSourceType: 'general',
      trendTypeMap: [{
        label: '一天内',
        value: 'hour'
      }, {
        label: '一个月内',
        value: 'day'
      }, {
        label: '一年内',
        value: 'month'
      }],
      trendType: 'hour',
      totalData: 0,
      dataInfo: [],
      dataSourceInfo: [],
      trendInfo: {},
    }
  },
  mounted() {
    this.loadDataSourceInfo()
  },
  methods: {
    loadDataSourceInfo() {
      const postData = {
        level: this.dataSourceType,
        period: this.trendType
      }

      gPostAction('/dataClassification/statisticSource', postData).then((res) => {
        if (res.success) {
          this.totalData = res.data.count
          this.dataInfo = res.data.statisticType
          this.dataSourceInfo = res.data.statisticSource
          this.trendInfo = res.data.listCountTrend
        }
      })
    },
  },
}
</script>

<style
    lang="less"
    scoped
>
.card-title {
  padding-left: 10px;
  margin-bottom: 20px;
  font-size: 18px;
  border-left: 6px solid #0784D3;
  color: #0784D3;
}

.card-content {
  padding-left: 18px;

  span {
    font-size: 20px;
    color: #101010;
  }

  & span:first-child {
    padding-right: 8px;
  }
}

.inner-card {
  display: inline-block;
  width: 48%;

  &:first-child {
    margin-right: 2%
  }
}
</style>